<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class绑定之对象形式</title>
    <script src="js/vue.js"></script>
    <style>
        .static{
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
        .active{
            background-color: green;
        }
        .text-danger{
            color: red;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <!--动态写法：动静结合-->
    <!----对象形式的适用场景:样式的个数是固定的,样式的名字也是固定的,但是需要动态的决定样式用还是不用-->
    <div class="static" :class="classObj">{{msg}}</div>
    <br/>
    <div class="static" :class="{active:true,'text-danger':true}">{{msg}}</div>
</div>

<script>
     const vm = new Vue({
             el : '#app',
             //Model M
             data : {
                 //其实最终解析都是一样的
                  msg : 'Class绑定之对象形式',
                  classObj : {
                      active : true,
                      'text-danger' : true
                  }
             }
         })
</script>

</body>
</html>